<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>搭闪</title>
        <link rel="shortcut icon" href="https://shishikeji.oss-cn-qingdao.aliyuncs.com/xiaochengxu/liwu/D.png">
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
        <style>
            .card-body img {
                width: 80px;
                height: 80px
            }
            .modal-body img {
                width: 200px;
                height: 200px
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
            <div class="container">
                <a href="#" class="navbar-brand">
                    <img style="width: 40px;height:40px" src="https://shishikeji.oss-cn-qingdao.aliyuncs.com/xiaochengxu/liwu/D.png" alt="">
                    搭闪</a>

                <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navmenu"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav ms-auto">
                        <!--margin start = margin left-->
                        <!-- <li class="nav-item">
                            <div class="nav-link">联系我们</div>
                        </li> -->
                        <!-- <li class="nav-item">
                            <div class="nav-link">nav2</div>
                        </li>
                        <li class="nav-item">
                            <div class="nav-link">nav3</div>
                        </li> -->
                    </ul>
                </div>
            </div>
        </nav>

        <section class="p-5 bg-dark text-light text-center text-sm-start">
            <!--padding -->
            <div class="container">
                <div class="d-flex">
                    <!--display flex-->
                    <div>
                        <h1>
                            成为一个<span class="text-warning">搭闪人</span>
                        </h1>
                        <p class="my-4">
                            <!-- margin-top margin-bottom -->
                            发展俱乐部活动，旨在丰富市民业余生活，促进兴趣交流与技能提升。通过定期举办篮球赛、读书会、烹饪工作坊等多元化活动，不仅加深了成员间的友谊，还激发了个人潜能与创造力。同时，强化同城生活服务，搭建便捷平台，如家政服务预约、二手物品交换、社区公益活动等，让居民享受更加贴心、高效的日常生活体验。两者相辅相成，共同营造了一个充满活力与温情的城市社区环境。
                        </p>
                        <button class="btn btn-primary btn-lg"  data-bs-toggle="modal" data-bs-target="#exampleModal">
                            关注我们
                        </button>
                    </div>
                    <img
                        src="./img/showcase.svg"
                        alt="showcase"
                        class="w-50 d-none d-md-block"
                    />
                </div>
            </div>
        </section>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="exampleModalLabel">关注公众号、小程序二维码</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <img src="/img/gongzhonghao.jpg" alt="">
                  <img src="/img/xiaochengxu.jpg" alt="">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                  <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
                </div>
              </div>
            </div>
          </div>

        <!-- <section class="p-5 bg-primary text-light">
            <div class="container">
                <div
                    class="d-md-flex justify-content-between align-items-center"
                >
                    <h3 class="mb-3">现在注册账号开始编程之旅</h3>
                    <div class="input-group news-input">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="请输入你的邮箱"
                        />
                        <button class="btn btn-dark btn-lg">注册</button>
                    </div>
                </div>
            </div>
        </section> -->

        <!-- <section class="p-5">
            <div class="container">
                <div class="row g-4">
                    <div class="col-md">
                        <div class="card bg-dark text-light">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-primary mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card bg-secondary text-light">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-dark mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="card bg-dark text-light">
                            <div class="card-body text-center">
                                <div class="card-title">前端知识</div>
                                <div class="card-text">
                                    Lorem ipsum dolor sit amet consectetur,
                                    adipisicing elit. Minus voluptatibus
                                    consequuntur vitae quo quibusdam
                                </div>
                                <a href="#" class="btn btn-primary mt-2"
                                    >学习前端</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> -->

        <!-- <section class="p-5">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md">
                        <img src="img/1.svg" alt="1" class="img-fluid" />
                    </div>
                    <div class="col-md p-5">
                        <h2>课程介绍</h2>
                        <p class="lead">
                            Lorem ipsum, dolor sit amet consectetur adipisicing
                            elit. Praesentium ea ratione corporis et provident.
                            Quia!
                        </p>
                        <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing
                            elit. Amet nostrum, aperiam assumenda vitae, beatae
                            at sint quaerat consequatur maxime, hic voluptatum
                            ex. Dolor minus perferendis magni autem
                            exercitationem quis quos.
                        </p>
                        <a href="" class="btn btn-light">查看更多</a>
                    </div>
                </div>
            </div>
        </section> -->

        <section class="pt-2 bg-dark text-light">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md">
                        <h2>关于我们</h2>
                        <p class="lead">
                            年轻创始团队，以无畏的勇气和创新的思维，引领着新时代的潮流。他们怀揣梦想，敢于挑战传统，用科技赋能生活，为市场带来前所未有的活力与变革。团队成员间默契十足，优势互补，在快速迭代的创业道路上相互扶持，共同面对挑战，不断成长。他们的激情与才华，正逐步转化为推动社会进步的力量，书写着属于自己的辉煌篇章。
                        </p>
                        <!-- <p>
                            Lorem, ipsum dolor sit amet consectetur adipisicing
                            elit. Amet nostrum, aperiam assumenda vitae, beatae
                            at sint quaerat consequatur maxime, hic voluptatum
                            ex. Dolor minus perferendis magni autem
                            exercitationem quis quos.
                        </p> -->
                        <!-- <a href="" class="btn btn-light">查看更多</a> -->
                    </div>

                    <div class="col-md">
                        <img src="img/2.svg" alt="1" class="img-fluid" />
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center">常见问题</h2>
                <div
                    class="accordion accordion-flush"
                    id="accordionFlushExample"
                >
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne"
                                aria-expanded="false"
                                aria-controls="flush-collapseOne"
                            >
                                一个人可否申请多个俱乐部
                            </button>
                        </h2>
                        <div
                            id="flush-collapseOne"
                            class="accordion-collapse collapse show"
                            aria-labelledby="flush-headingOne"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                暂时不行；一个人只能申请一个俱乐部
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button
                                class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseTwo"
                                aria-expanded="false"
                                aria-controls="flush-collapseTwo"
                            >
                                闪豆可以用来做什么
                            </button>
                        </h2>
                        <div
                            id="flush-collapseTwo"
                            class="accordion-collapse collapse"
                            aria-labelledby="flush-headingTwo"
                            data-bs-parent="#accordionFlushExample"
                        >
                            <div class="accordion-body">
                                闪豆作用于打赏作者、报名俱乐部或者圈子活动、闪豆可以用于提现到微信零钱
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>

        <section class="p-5 bg-primary">
            <div class="container">
                <h2 class="text-center text-light">团队介绍</h2>
                <p class="lead text-center text-white mb-5">
                    搭上快车，闪电般飞翔～
                </p>
                <div class="row g-4">
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00015.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">CEO</h3>
                                <p class="card-text">
                                    团队智慧
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00021.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">CFO</h3>
                                <p class="card-text">
                                    利益核心
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00053.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">SE</h3>
                                <p class="card-text">
                                    效率至上
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00067.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">SE</h3>
                                <p class="card-text">
                                    效率至上
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00004.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">DCT</h3>
                                <p class="card-text">
                                    设计担当
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-2">
                        <div class="card bg-light">
                            <div class="card-body text-center">
                                <img src="img/file00040.jpeg" class="mb-3 rounded-circle"/>
                                <h3 class="card-title">QA</h3>
                                <p class="card-text">
                                    质量担当
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-5">
            <div class="container">
                <h2 class="text-center mb-4">联系我们</h2>

                <ul class="list-group list-group-flush">
                    <li class="list-group-item">电话：18866333949</li>
                    <!-- <li class="list-group-item">邮箱： bilibil@bili.com</li> -->
                    <li class="list-group-item">地址：山东省日照市东港区</li>
                  </ul>
            </div>
        </section>

        <footer class="p-5 bg-dark text-white text-center">
            <div class="container">
                <p class="lead">Copyright &copy; 2024 时时（山东）科技创新有限公司</p>
            </div>
        </footer>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
    </body>
</html>
